"use strict";
import * as React from 'react';
const { View, FlatList, TouchableOpacity, DeviceEventEmitter } = require('react-native');
const { connect } = require('react-redux');
const NavigationBar = require('react-native-navbar').default;
const { Actions } = require("react-native-router-flux");
import { guideStyles } from "../../assets/styles/guide";
import { commonProps, commonStyles } from "../../assets/styles/common";
import NavBackButton from "../../component/BackButton";
import MyText from "../../component/MyText";
import { activeFilterStyles } from "../../assets/styles/community";
import Line from "../../component/Line";
import MyIcon from "../../component/icon";
const ActiveTypeItem = (props) => {
    return (<TouchableOpacity style={[activeFilterStyles.item]} onPress={props.onPress ? props.onPress.bind(null, props.item) : null} activeOpacity={0.9}>
            <View style={[commonStyles.flexRow, { alignItems: 'center' }]}>
                <View style={[activeFilterStyles.itemIconContainer, commonStyles.centerVH]}>
                    {props.selected ? <MyIcon name={'icon-gou'} color='#DAC228'/> : null}
                </View>
                <MyText style={[activeFilterStyles.listItemText, props.selected ? activeFilterStyles.active : null]}>{props.item.typeName}</MyText>
            </View>
            <View style={{ paddingLeft: 40 }}>
                <Line />
            </View>
        </TouchableOpacity>);
};
class Page extends React.Component {
    constructor() {
        super(...arguments);
        this.state = {
            selectedArray: []
        };
        this.onReachedEnd = () => {
            if (this.props.active.typeList && !this.props.active.typeList.last) {
                this.props.dispatch({
                    type: 'active/fetchTypeList',
                    payload: {
                        pi: this.props.active.typeList.number + 2,
                        ps: 10,
                        loadmore: true,
                    }
                });
            }
        };
        this.onItemPress = (item) => {
            let selectedArray = this.state.selectedArray;
            if (!selectedArray) {
                selectedArray = [];
            }
            const index = selectedArray.indexOf(item.id);
            if (index === -1) {
                selectedArray.push(item.id);
            }
            else {
                selectedArray.splice(index, 1);
            }
            this.setState({ selectedArray });
        };
        this.applyFilter = () => {
            this.props.dispatch({
                type: 'active/applyActiveFilter',
                payload: { selectedActiveTypes: this.state.selectedArray }
            });
        };
        this.renderItem = ({ item }) => {
            return <ActiveTypeItem item={item} selected={this.state.selectedArray.indexOf(item.id) !== -1} onPress={this.onItemPress.bind(this, item)}/>;
        };
        this.renderListHeaderComponent = () => {
            return (<View style={[commonStyles.listItem, activeFilterStyles.listItem, commonStyles.flexColumn]}>
                <View style={[commonStyles.flex1, { justifyContent: 'center' }]}>
                    <MyText color={'#333'} fontSize={16}>按兴趣筛选</MyText>
                </View>
                <Line />
            </View>);
        };
    }
    componentDidMount() {
        this.props.dispatch({ type: 'active/fetchTypeList', payload: { pi: 1, ps: 10 } });
    }
    render() {
        return (<View style={commonStyles.container}>
                <NavigationBar {...commonProps.navBar} leftButton={<NavBackButton>取消</NavBackButton>} title={{ title: '活动筛选器', tintColor: '#fff' }}/>
                <View style={commonStyles.flex1}>
                    <FlatList data={this.props.active.typeList ? this.props.active.typeList.content : []} style={{ backgroundColor: '#fff' }} extraData={this.state} ListHeaderComponent={this.renderListHeaderComponent} keyExtractor={(item) => item.id} onEndReachedThreshold={1} onEndReached={this.onReachedEnd} renderItem={this.renderItem}/>
                </View>
                <TouchableOpacity activeOpacity={0.9} onPress={this.applyFilter}>
                    <View style={guideStyles.loginBth}>
                        <MyText style={guideStyles.loginText}>应用筛选器</MyText>
                    </View>
                </TouchableOpacity>
            </View>);
    }
}
Page.defaultProps = {
    onApply: null
};
export default connect(({ auth, active }) => ({ auth, active }))(Page);
